<template>
    <fieldset>
        <legend>App</legend>
        <div class="box">
            <div class="pic"><img src="./未标题-1.jpg" alt=""></div>
            <div class="words">~ 开始努力写代码了 ~</div>
            <inputs @add="add" ></inputs>
            <btns :arr="newarr" @aaa="aaa" :all="all" :finish="finish" :unfinished="unfinished" 
            @del="del"></btns>
        </div>
    </fieldset>
</template>
<script setup>
import { ref, computed, onMounted } from "vue"
import inputs from './inputs.vue'
import btns from './li-btn.vue'
let arr = ref([])
// let aaa=ref('')
let all = ref(0)
let finish = ref(0)
let unfinished = ref(0)
let filterflag = ref('allfinish')
// let arrs=ref([datas])
let aaa = input => {
    // console.log(input);
    filterflag.value=input
}

let add = function(val){
    console.log(val);
    arr.value.unshift({
        name:val,
        id:Math.random().toString(32).substring(2),
        judgment:false
    })

    localStorage.setItem('get',JSON.stringify(arr.value))
}

let del = function(a){

    arr.value=arr.value.filter(item=>item.id!==a.id)

    // arr.value.splice(index,1)

    // console.log(arr.value);
    localStorage.setItem('get',JSON.stringify(arr.value))
}

let newarr=computed(() => {
    let a = arr.value
    let b = arr.value.filter(item => item.judgment)
    let c = arr.value.filter(item => !item.judgment)
    all.value = a.length
    finish.value = b.length
    unfinished = c.length
    // console.log(all.value);
        switch (filterflag.value) {
            case 'allfinish':
                return a;
            case 'finished':
                return b;
            case 'unfinished':
                return c
        }
    })
onMounted(()=>{
    
    if(localStorage.getItem('get')){
        arr.value=JSON.parse(localStorage.getItem('get'))
    }
    
})
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.actions {
    background-color: hotpink;
}

fieldset {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
    width: 600px;
    /* height: 400px; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

.box {
    width: 550px;
    /* height: 350px; */
    background-color: #f2f2f2;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 15px;
}

.words {
    color: rgb(7, 190, 246);
    font-size: 25px;
    font-weight: 900;
    margin: 40px 0 30px 0;
}

.pic {
    margin-top: 30px;
}

.smallbox {
    display: flex;
}



.bottoms div {
    margin: 10px;
}
</style>
